<template>
    <div class="index">
        <cube-slide ref="slide" :data="items" class="swiper">
            <cube-slide-item v-for="(item, index) in items" :key="index">
                <a href="javascript:void(0)">
                    <img :src="item.img.url">
                </a>
            </cube-slide-item>
        </cube-slide>
        <div class="home-main-header">精选主题</div>
        <div class="theme-box">
            <div :class="index==2?'theme-item big':'theme-item'" v-for="(item,index) in special" :key="index">
                <a :href="'/theme/'+item.id"><img :src="item.topic_img.url" alt=""></a>
            </div>
        </div>
        <div class="home-main-header">最近新品</div>
        <list-product :products="this.products">

        </list-product>
    </div>
</template>

<script>
import ListProduct from './../components/product-list.vue';
export default {
    name:"index",
    components:{
        ListProduct
    },
    data(){
        return {
             items: [],
             ids:'1,2,3',
             special:[],
             products:[]
        }
    },
    mounted(){
        this.getbanner(),
        this.gettheme(),
        this.getproduct()
    },
    methods:{
        //获取banner
       getbanner(){
            this.axios.get('api/v1/banner/1').then((res)=>{
               this.items = res.data.items;
            })
        },
        //专题
        gettheme(){
           this.axios.get('api/v1/theme',{
               params:{
                   ids:this.ids
               }
           }).then((res)=>{
               this.special = res.data;
           })
        },
        //最近新品
        getproduct(){
            this.axios.get('api/v1/product/recent').then((res)=>{
                this.products = res.data;
            }).catch((res)=>{
                return res
            })
        }
    }
}
</script>

<style lang="scss">
@import './../assets/scss/config.scss';
    .index{
        margin-bottom: 42.66px;
        .swiper{
            height: 200px !important;
        }
        .home-main-header{
            display: flex;
            justify-content: center;
            height: 60px;
            font-size: 14px;
            align-items: center;
            color:$colorB;
        }
        .theme-box{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .theme-item{
                display: flex;
                width:50%;
                height: 150px;
                position: relative;
                box-sizing: border-box;
                border-bottom: 0.5px solid #fff;
                &:first-child{
                    border-right: 0.5px solid $colorG;
                }
                img{
                    width:100%;
                    height: 100%;
                }
            }
        }
        .big{
            width:100% !important;
        }
    }
</style>
